<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
</head>

<body>
<div style="width: 300px; margin: 0 auto; text-align: center;">
    <h1>欢迎, <span th:text="${username}">默认用户名</span>!</h1>
    <h1>欢迎, <span th:text="${message}">默认信息</span>!</h1>



    <h2>用户登录</h2>
    <form action="/login/doLogin" method="post">
        <div style="margin-bottom: 15px;">
            <label for="username">用户名：</label><br>
            <input type="text" id="username" name="username" style="width: 200px; padding: 5px;">
        </div>
        <div style="margin-bottom: 15px;">
            <label for="password">密码：</label><br>
            <input type="password" id="password" name="password" style="width: 200px; padding: 5px;">
        </div>
        <div style="margin-bottom: 15px;">
            <label for="captchaInput">验证码：</label><br>
            <input type="text" id="captchaInput" name="captcha" style="width: 120px; padding: 5px;">
            <img src="captcha.jpg" alt="验证码" style="vertical-align: middle; height: 30px;">
        </div>
        <input type="submit" value="登录" style="padding: 8px 20px; background-color: #4CAF50; color: white; border: none;">
    </form>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        // 给表单绑定提交事件，阻止默认提交行为
        $("form").submit(function (e) {
            e.preventDefault();
            // 这里可以添加一些前端验证逻辑，例如检查用户名和密码是否为空等
            var username = $("#username").val();
            var password = $("#password").val();
            var captcha = $("#captchaInput").val();
            if (!username ||!password ||!captcha) {
                alert("用户名、密码和验证码不能为空");
                return false;
            }
            // 如果前端验证通过，手动触发表单提交
            this.submit();
        });
    });
</script>
</html>
